<script setup>
import { ElMessage } from "element-plus";
import { reactive, ref } from 'vue';
import addForm from './addForm.vue';
import { useCommunityList, Time } from "@/hooks/index.js";
import { getIndexListApi, delIndexApi } from "@/api/houseIndex.js";
import { gethouse } from "@/api/house.js";
//小区信息
const cateList = useCommunityList()
const ArrowShow = ref(true)
const addRef = ref();
// ================================
// --------------------------------列表功能------
const queryData = reactive({
    current: 1,
    pageSize: 5,
    enter_time: '',//时间
    community_code: '',//小区
    building_code: '',//栋数
    name: '',//房产名
    floor: '',//楼层
    unit: '',//单元
    owner_name: '',//户主
    owner_tel: ''//手机号
});

const count = ref(0)
const list = ref([])
const initData = async () => {
    let { data } = await getIndexListApi(queryData)
    count.value = data.count
    list.value = data.rows
};
onMounted(() => {
    initData()
});

// 全部获取栋数
const buildingList = ref([])
const communityChange = async () => {
    queryData.building_code = null
    const res = await gethouse(queryData.community_code) //code='CM-8c63d562-199e-4dd2-b08c-55b271a00769'
    buildingList.value = res.data
}
// 每页数量切换
const sizeChange = (val) => {
    queryData.pageSize = val;
    initData();
};
// 页码切换
const currentChange = (val) => {
    queryData.current = val;
    initData();
};
//搜索确定
const onSearch = () => {
    queryData.current = 1
    queryData.enter_time = queryData.enter_time !== '' ? queryData.enter_time.join(',') : ''
    initData();
};
// 搜索取消
const onReset = () => {
    Object.assign(queryData, {
        current: 1,
        pageSize: 5,
        enter_time: '',//时间
        community_code: '',//小区
        building_code: '',//栋数
        name: '',//房产名
        floor: '',//楼层
        unit: '',//单元
        owner_name: '',//户主
        owner_tel: ''//手机号
    });
    initData();
};
// ==============
// --------------------------------修改功能------
const editRow = (id) => {
    addRef.value.replyData(id);
};
// ==========================================
// --------------------------------删除功能------
const delRow = async (id) => {
    console.log(id)
    await delIndexApi(id)
    ElMessage.success('删除成功')
    if (queryData.current > 1 && list.value.length === 1) queryData.current--
    initData()
}
</script>
<template>
    <div class="app-container">
        <p style="font-size: 14px;"><b style="font-size: 20px;">房产管理</b> 用于展示房产列表信息，以户为单位</p>
        <el-card style="margin-bottom: 15px;">
            <!-- 搜索区域 -->
            <el-form label-position="top" :inline="true">
                <el-row >
                    <el-form-item style="width: 190px;" label="小区名称">
                        <el-select v-model="queryData.community_code" size="large" @change="communityChange">
                            <el-option v-for="item in cateList" :key="item.id" :label="item.name" :value="item.code">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="width: 190px;" label="栋数">
                        <el-select v-model="queryData.building_code" size="large">
                            <el-option v-for="item in buildingList" :key="item.id" :label="item.name" :value="item.code">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="width: 190px;" label="单元数">
                        <el-input v-model="queryData.unit" size="large"></el-input>
                    </el-form-item>
                    <el-form-item style="width: 190px;" label="楼层">
                        <el-input v-model="queryData.floor" size="large"></el-input>
                    </el-form-item>
                    <el-form-item style="width: 190px;" label="房产名称">
                        <el-input v-model="queryData.name" size="large"></el-input>
                    </el-form-item>
                    <el-form-item style="width: 190px; padding-top: 30px;" >
                        <el-button type="primary" @click="onSearch">搜索</el-button>
                        <el-button @click="onReset">重置</el-button>&nbsp;&nbsp;&nbsp;
                        <span @click="ArrowShow = !ArrowShow"> 
                            <span v-if="ArrowShow"  >折叠</span>
                            <span v-else>展开</span>
                            <el-icon>
                                <ArrowUp v-if="ArrowShow"/>
                                <ArrowDown v-else/>
                            </el-icon></span>
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item v-if="ArrowShow" label="户主名称">
                        <el-input v-model="queryData.owner_name" size="large"></el-input>
                    </el-form-item>
                    <el-form-item v-if="ArrowShow" label="联系方式">
                        <el-input v-model="queryData.owner_tel" size="large"></el-input>
                    </el-form-item>
                    <el-form-item v-if="ArrowShow" label="入住时间">
                        <el-date-picker size="large" v-model="queryData.enter_time" type="daterange" unlink-panels
                            range-separator="至" start-placeholder="开始时间" value-format="x" end-placeholder="结束时间" />
                    </el-form-item>

                </el-row>
            </el-form>
        </el-card>

        <el-card>

            <!-- 工具区域 -->
            <el-row type="flex" justify="space-between">
                <div></div>
                <div>
                    <el-button type="primary" @click="addRef.isShow = true">新增</el-button>
                </div>
            </el-row><br>
            <!-- 表格区域 -->
            <el-table :data="list" stripe>
                <el-table-column label="小区名称">
                    <template #default="{ row }">
                        {{ row.community?.name }}
                    </template>
                </el-table-column>
                <el-table-column prop="title" label="栋数">
                    <template #default="{ row }">
                        {{ row.building?.name }}
                    </template>
                </el-table-column>
                <el-table-column prop="unit" label="单元数">
                </el-table-column>
                <el-table-column prop="floor" label="楼层"></el-table-column>

                <el-table-column prop="code" label="房产编号">
                </el-table-column>
                <el-table-column prop="name" label="房产名称">
                </el-table-column>
                <el-table-column prop="owner_name" label="户主名称">
                </el-table-column>

                <el-table-column prop="owner_tel" label="联系方式">

                </el-table-column>
                <el-table-column prop="rooms" label="房间数">

                </el-table-column>
                <el-table-column prop="desc" label="描述">
                </el-table-column>
                <el-table-column label="入住时间">
                    <template #default="{ row }">
                        {{ Time(row.enter_time) }}
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="{ row }">
                        <el-button type="text" text @click="editRow(row.id)">编辑</el-button>
                        <el-popconfirm title="确认删除吗？" @confirm="delRow(row.id)">
                            <template #reference>
                                <el-button type="text" text>删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table><br>
            <!-- 分页区域 -->
            <el-pagination @size-change="sizeChange" @current-change="currentChange"
                v-model:current-page="queryData.current" v-model:page-size="queryData.pageSize"
                layout="total, prev, pager, next" :total="count" background>

            </el-pagination>
            <!-- 新增修改组件 -->
            <addForm ref="addRef" @updateList="initData" />
        </el-card>
    </div>
    <el-from label-width="80px" style="text-align: center;">
    <div>Ant Design divro黑马前端合肥前端欢迎您</div>
    <div>© 2023 悦兴物业集团</div>
    <br>
  </el-from>
</template>
<style  scoped>
.demonstration {
    display: block;
    color: #606266;
    font-size: 14px;
}

.block {
    padding-top: 30px;

}
</style>